// 抽离组建计算的通用逻辑，方便导入到每个页面中
import store from "../store";
import {mapActions, mapState} from "vuex";
import appConfig from "../../api/appConfig";

export default {
    computed: {
        ...mapState('app', ['device', 'winSize', 'uniLeftMenuState'])
    },
    watch: {
        winSize(newVal, oldVal){
            this.tableCal()
            this.imgCal()
        }
    },
    data(){
        return {
            popUpInfo: {
                width: 0,  // 根据屏幕计算大小
                height: 0,
                maxHeight: 0,  // 用于y轴方向的滚轮
                needScroll: false  // 屏幕太小就使用scroll view
            },
            multiImgInfo: {
                width: 0,  // 两个正方形图片的合理大小
                maxWidthMobile: 0,  //125, 每个正方形超过这个值后应该被拉回来，用户自行调整的超参数
                maxWidthDesktop: 0,  // 每个正方形超过这个值后应该被拉回来
                imgSpace: 12,  // 图像间隔
                componentPadding: 80 * 2,  // 不同的容器自带的边框， 此项目里只有一种,
                componentPaddingMobile: 80,  // 手机版
                swiperWidth: 0,  // 通过refs获取的组建宽度
            },
            rightMenuInfo: {  // 右侧栏的超参数
                height: 0
            },
            tableCal(){
                // 图标居中占据 80%的显示空间
                this.popUpInfo.width = Math.round(this.winSize.width * 0.82)
                this.popUpInfo.height = Math.round(this.winSize.height * 0.65)
                this.popUpInfo.maxHeight = this.popUpInfo.height - 60
                this.popUpInfo.needScroll = this.popUpInfo.width < 400;  // 手机

                if(appConfig.system.DEBUGGER){
                    console.log('弹窗动态计算结果', this.popUpInfo.width, this.popUpInfo.needScroll)
                }

                // TODO 尝试性的增加右侧栏杆超参数
                this.rightMenuInfo.height = Math.round(this.winSize.height * 0.8)
            },
            imgCal(){
                // debugger
                if(this.uniLeftMenuState.matchLeftWindow === true){
                    // 240是左侧栏的宽度, 3 / 5是组建应该占据的右侧空间大小
                    this.multiImgInfo.width =
                        Math.round((this.multiImgInfo.swiperWidth - this.multiImgInfo.componentPadding - this.multiImgInfo.imgSpace) / 2)
                    if(this.multiImgInfo.maxWidthDesktop !== 0 && this.multiImgInfo.width > this.multiImgInfo.maxWidthDesktop){
                        this.multiImgInfo.width = this.multiImgInfo.maxWidthDesktop
                    }
                }else{
                    this.multiImgInfo.width =
                        Math.round((this.winSize.width - this.multiImgInfo.componentPaddingMobile - this.multiImgInfo.imgSpace) / 2)
                    if(this.multiImgInfo.maxWidthMobile !== 0 && this.multiImgInfo.width > this.multiImgInfo.maxWidthMobile){
                        this.multiImgInfo.width = this.multiImgInfo.maxWidthMobile
                    }
                }

            },
            stateJudge(mode){
                // 判断几种比较常见的模式
                if (mode === appConfig.calMode.desktop){
                    return this.device === appConfig.deviceType.desktop
                }else if(mode === appConfig.calMode.mobile){
                    return this.device === appConfig.deviceType.mobile
                }else if(mode === appConfig.calMode.mobileNoLeft){
                    return (this.device === appConfig.deviceType.mobile) &&
                           (this.uniLeftMenuState.matchLeftWindow === false)
                }else if(mode === appConfig.calMode.mobileLeft){
                    return (this.device === appConfig.deviceType.mobile) &&
                           (this.uniLeftMenuState.matchLeftWindow === true)
                }else{
                    return false
                }
            }
        }
    }
}
